<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">AJAX - Partial Processing</h1>
        <div class="entry">
            <p>In the example below, although firstname is required, there won't be validation errors because of ajax requests caused by ajaxified surname
			as only surname is processed.</p>

            <h:form id="form">

                <p:panel header="New Person">
                    <h:panelGrid columns="3">
                        <h:outputLabel for="firstname" value="Required Firstname *:" />
                        <p:inputText id="firstname" value="#{pprBean.firstname}" required="true" />
                        <h:outputText />

                        <h:outputLabel for="surname" value="Surname (request on blur): " />
                        <p:inputText id="surname" value="#{pprBean.surname}">
                            <p:ajax event="blur" update="out2" process="@this"/>
                        </p:inputText>
                        <h:outputText id="out2" value="#{pprBean.surname}" />
                    </h:panelGrid>
                </p:panel>

            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="ajaxifyPartialSubmit.xhtml">
                    <pre name="code" class="xml">
&lt;h:form id="form"&gt;

	&lt;p:panel header="New Person"&gt;
		&lt;h:panelGrid columns="3"&gt;
			&lt;h:outputLabel for="firstname" value="Required Firstname *:" /&gt;
			&lt;p:inputText id="firstname" value="\#{pprBean.firstname}" required="true" /&gt;
			&lt;h:outputText /&gt;
			
			&lt;h:outputLabel for="surname" value="Surname (request on blur): " /&gt;
			&lt;p:inputText id="surname" value="\#{pprBean.surname}"&gt;
				&lt;p:ajax event="blur" update="out2" process="@this"/&gt;
			&lt;/p:inputText&gt;
			&lt;h:outputText id="out2" value="\#{pprBean.surname}" /&gt;
		&lt;/h:panelGrid&gt;
	&lt;/p:panel&gt;
	
&lt;/h:form&gt;
                    </pre>
                </p:tab>

                <p:tab title="PersonBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

public class PersonBean {

	private String firstname;
	
	private String surname;

	public String getFirstname() {
		return firstname;
	}
	public void setFirstname(String firstname) {
		this.firstname = firstname;
	}

	public String getSurname() {
		return surname;
	}
	public void setSurname(String surname) {
		this.surname = surname;
	}
	
	public void savePerson(ActionEvent actionEvent) {
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Welcome " + firstname + " " + surname + "!"));
	}
}
                    </pre>
                </p:tab>
            </p:tabView>

        </div>


    </ui:define>
</ui:composition>